<template>
  <el-dialog
    :visible.sync="dialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    :before-close="handleClose"
    title="修改密码"
    center
  >
    <div class="form_reset">
      <el-form
        ref="form"
        :model="form"
        :rules="form_rules"
        label-width="120px"
        style="margin:10px;width:auto;"
      >

        <el-form-item prop="oldPwd" label="旧密码">
          <el-input
            v-model="form.oldPwd"
            :type="pwdType.oldPwdType"
            auto-complete="new-password"
            placeholder="请输入旧密码"
          />
          <span class="show-pwd" @click="showPwd('oldPwdType')">
            <svg-icon :icon-class="pwdType.oldPwdType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item prop="newPwd" label="输入密码">
          <el-input
            v-model="form.newPwd"
            :type="pwdType.newPwdType"
            auto-complete="new-password"
            placeholder="请输入新密码"
          />
          <span class="show-pwd" @click="showPwd('newPwdType')">
            <svg-icon :icon-class="pwdType.newPwdType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item prop="checkPass" label="确认密码">
          <el-input
            v-model="form.checkPass"
            :type="pwdType.checkPassType"
            auto-complete="new-password"
            placeholder="请再次输入密码"
          />
          <span class="show-pwd" @click="showPwd('checkPassType')">
            <svg-icon :icon-class="pwdType.checkPassType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="onSubmitUser('form')">提 交</el-button>
    </span>

  </el-dialog>
</template>

<script>
/* import { changePwd } from '@/api/login'*/
import { validatePass, validateNotNull } from '@/utils/validate'
export default {

  name: 'ChangePwd',
  props: {

    dialog: {
      type: Boolean,
      required: false,
      default: () => {
        return false
      }
    }
  },
  data() {
    const validateOld = (rule, value, callback) => {
      if (value) {
        const str = value.replace(/^\s*|\s*$/g, '')
        if (value === '' || str === '') {
          callback(new Error('请输入旧密码！'))
        } else {
          if (value.length > 64) {
            callback(new Error('密码超出长度！'))
          } else {
            callback()
          }
        }
      } else {
        callback(new Error('请输入旧密码！'))
      }
    }
    const validatePwd = (rule, value, callback) => {
      // && this.dialog.option !== 'edit'
      if (validateNotNull(value)) {
        if (validatePass(value)) {
          callback()
        } else {
          callback(new Error('密码格式不符合要求，密码长度在8-20位之间，必须包含至少1个大写字母，1个小写字母和1个数字。'))
        }
      } else {
        callback(new Error('密码不能为空！'))
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value) {
        const str = value.replace(/^\s*|\s*$/g, '')
        if (value === '' || str === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.form.newPwd) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      pwdType: {
        oldPwdType: 'password',
        newPwdType: 'password',
        checkPassType: 'password'
      },
      form: {},
      form_rules: {
        oldPwd: [
          { required: true, message: '旧密码不能为空！', trigger: 'blur' },
          { validator: validateOld, trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '新密码不能为空！', trigger: 'blur' },
          { validator: validatePwd, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '不能为空！', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  computed: {},

  mounted() {
    // document.addEventListener('click', (e) => {
    //   console.info(e.target.parentNode)
    // })
  },

  created() {

  },
  methods: {
    handleClose() {
      this.$refs['form'].clearValidate()
      this.$emit('closePwd')
    },
    // 修改密码
    showPwd(msg) {
      this.pwdType[msg] = this.pwdType[msg] === 'password' ? '' : 'password'
    },
    onSubmitUser(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const up = {
            oldPwd: this.form.oldPwd,
            newPwd: this.form.newPwd
          }
          this.loading = true
          return new Promise((resolve, reject) => {
            changePwd(up).then(response => {
              this.loading = false
              if (response.code === '0000') {
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                })
              }
              this.handleClose()
              resolve()
            }).catch(error => {
              this.loading = false
              reject(error)
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .table-span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /**
表单修改密码眼睛样式
*/
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 4px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
  }
</style>
<style>
  /**
 解决ie input输入框输入密码是有默认眼睛样式
 */
  .form_reset input::-ms-clear{display:none !important;}
  .form_reset input::-ms-reveal{display:none !important;}
 /* input::-ms-clear{display:none!important;}
  input::-ms-reveal{display:none!important;}*/
</style>

